<template>
  <div>
    <Header></Header>
    <!-- 导航栏 -->
    <van-tabs
      v-model="active"
      title-active-color="#fb7299"
      title-inactive-color="black"
      line-height="2"
      class="van-tabs"
    >
      <van-tab :title="item.title" v-for="(item,index) in cateList" :key="index">
           <!-- 到底加载数据 -->
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check ="true">
         <!-- 内容主体区域 -->
            <div class="item">
              <div class="img" v-for="(item1,index1) in videoList.list" :key="index1">
                <!-- 播放量 -->
                <span class="span">播放量：10.6万</span>
                 <img :src="item1.img" style="width:100%" alt="" @click="$router.push(`/play/${item1.id}`)">
                 <!-- 描述 -->
                  <p class="name">{{item1.name}}</p>
              </div>
            </div>
          </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Header from "@/view/Header.vue"
export default {
  components: {
    Header
  },
  data () {
    return {
      cateList: [],
      active:0,
      videoList:{}
    }
  },
  created () {
    this.getCateList()
  },
  // 监听当前选中的栏目
  watch: {
    active () {
      this.getVideo()
    }
  },
  methods: {
    // 获取栏目列表
    async getCateList () {
      const res = await this.$http.get('/category')
      this.changeCateList(res.data)
      // console.log(res);
  },
  // 把栏目中的数据添加到catelist中
  changeCateList (data) {
    // 往res.data中添加数据
       const newCateList = data.map((item,index) => {
        //  添加一个空数组存放数据
           item.list = []
           item.page = 0
           item.pagesize = 10
           item.loading = false
           item.finished = false
           return item
        })
        this.cateList = newCateList
        this.getVideo()
  },
  // 获取每个栏目的数据
  async getVideo () {
    const cateList1 = this.getCateListId()
    this.videoList = cateList1
    const res  = await this.$http.get(`/detail/${this.videoList._id}`,{
      params: {
        page: this.videoList.page,
        pagesize: this.videoList.pagesize
      }
    })
      this.videoList.list.push(...res.data)
      // console.log(this.cateList);
      this.videoList.loading = false
      // console.log(this.videoList)
  },
  // 根据下标获取catelist中的数据
   getCateListId () {
   const cateList1 = this.cateList[this.active]
    return cateList1
   },
  //  到底部刷新
  onLoad () {
    // const cateListId = this.getCateListId()
     setTimeout(()=>{
     this.videoList.page += 1
     this.getVideo()
    },1500)



    // console.log(this.videoList);
  }
  }
}
</script>

<style lang="less" scoped>
  .item{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    .img{
      width:45%;
      margin: 1.389vw 0 0 0;
    }
    .name{
      font-size: 3.611vw;
    }
    .span{
      position: absolute;
      font-size:3.333vw;
      color:#555353;
      margin-top: 24.2vw;
      margin-left: 0.8vw;
    }
  }
  // .van-tabs{
  //     position: fixed;
  //     top: 45px;
  // }
</style>
